<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>模块管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<el-alert title="注意:只允许为第一,二级分类设置相关参数!" type="warning" effect="dark" :closable="false" show-icon>
			</el-alert>
			<el-container>
			  <el-aside width="200px" style="background-color: #FFFFFF;">
				  <template slot-scope="scope">
					  <el-tree :data="dataList" :props="defaultProps" @node-click="handleNodeClick">
					  </el-tree>
				  </template>
			  </el-aside>
			  <el-main style="background-color: #FFFFFF;">
				  <el-form ref="formref" :model="form" label-width="90px">
					  <el-form-item>
					    <el-button type="success" @click="add(form)">添加子节点</el-button>
					    <el-button type="primary" @click="edit">设置父节点</el-button>
					    <el-button type="danger" @click="del(form)">删除此节点</el-button>
					  </el-form-item>
					  <el-form-item>
					    <el-divider content-position="left">功能模块信息维护</el-divider>
					  </el-form-item>
				    <el-form-item label="父节点编号">
				      <el-input v-model="form.ParentId" :disabled="parentdisabled"></el-input>
				    </el-form-item>
					<el-form-item label="节点编号">
					  <el-input v-model="form.Id"></el-input>
					</el-form-item>
					<el-form-item label="节点名称">
					  <el-input v-model="form.Name"></el-input>
					</el-form-item>
					<el-form-item label="路径">
					  <el-input v-model="form.Path"></el-input>
					</el-form-item>
					<el-form-item label="权重">
					  <el-input v-model="form.Weight"></el-input>
					</el-form-item>
					<el-form-item>
					     <el-button type="primary" @click="editmodulesinfo(form)">保存</el-button>
					</el-form-item>
				  </el-form>
			  </el-main>
			</el-container>
		</el-card>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form:{
					ParentId:"",
					Id:"",
					Name:"",
					Path:"",
					Weight:""
				},
				dataList: [],
				defaultProps: {
				  children: 'children',
				  label: 'Name'
				},
				parentdisabled:true
			}
		},
		created() {
			this.GetRoleList()
		},
		methods: {
			//展示编辑模块对话框
			async handleNodeClick(modulesinfo) {
			console.log(modulesinfo);
			this.form=modulesinfo
			},
			GetRoleList() {
				let _this = this;
				this.$http.post('api/MoKuai/GetList')
					.then(function(res) {
						_this.dataList=res.data.data
						console.log(res.data.data)
					})
			},
			//修改模块信息并提交
			async editmodulesinfo(formName) {
			if(formName.Id !==null && formName.Id!==""){
			//不等于0说明是编辑
			if(formName.Id!==0){
			this.$refs.formref.validate(async valid => {
			if (!valid) return;
			const { data: res } = await this.$http.post('api/MoKuai/editmoudules', formName);
			if (res.code != 0) {
			this.$message.error(res.msg);
			}
			this.$message.success(res.msg);
			this.GetRoleList();
			this.form={};
			})
			}else{
			this.$refs.formref.validate(async valid => {
			if (!valid) return;
			const { data: res } = await this.$http.post('api/MoKuai/addmoudules', formName);
			if (res.code != 0) {
			this.$message.error(res.msg);
			}
			this.$message.success(res.msg);
			this.GetRoleList();
			this.form={};
			
			})
			}
			
			}else{
			return this.$message.warning("请先选择")
			}
			
			},
			add(form) {
			if(form.Id ==null || form.Id==""){
			return this.$message.warning("请先选择");
			}
			this.form = {};
			this.disabled = false;
			this.parentdisabled = false;
			this.form.Id = 0;
			this.form.ParentId = form.Id
			
			},
			edit() {
			if(this.form.Id ==null || this.form.Id==""){
			return this.$message.warning("请先选择");
			}
			this.parentdisabled = false
			},
			 async del(form){
			if(this.form.Id ==null || this.form.Id==""){
			return this.$message.warning("请先选择");
			}
			const confirmResult = await this.$confirm('此操作将永久删除节点以及节点下的节点, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
			})
			//如果用户取消删除则 则打印cancel字符串
			.catch(err => err);
			//如果用户确认删除则confirmResult 为confim字符串
			
			if (confirmResult != 'confirm') {
			return this.$message.info('已经取消删除');
			}
			const { data: res } = await this.$http.post('api/MoKuai/delmoudules', 
			form
			);
			if (res.code != 0) {
			this.$message.error(res.msg);
			}else{
				this.$message.success('删除成功');
				this.GetRoleList();
				this.form={}
			}
			}
		}
	}
</script>
<style lang="less" scoped="scoped">



</style>
